
<template>
  <div class='student_import' 
    element-loading-text="拼命上传中"
    element-loading-spinner="el-icon-loading"
    v-loading="loading">
    <el-page-header size="small" @back="goBack" content="学生就业信息导入"> </el-page-header>
    <div class="student_import_content">
      <p style="font-weight:bold">1. 下载模板</p>
      <el-button type="primary" round size="small" @click="downloadTemplate">点击下载</el-button>
      <p style="font-weight:bold">2. 上传就业信息</p>
      <div style="text-align:center">
        <el-upload
          ref="upload"
          class="upload-demo"
          drag
          :action='baseURL+"/studentEmployment/upload"'
          :on-success="successSubmitHandler"
          :auto-upload="false"
          :limit="1">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <div style="text-align:right">
        <el-button size="small" @click="visible_import = false">取消</el-button>
        <el-button size="small" type="primary" @click="importSubmitHandler">确定</el-button>
      </div>
      <p style="font-weight:bold">3. 上传结果</p>
      <div style="color:red;text-align:center;line-height:3em">
        {{msg}}
      </div>
      <div v-if="errorList.length>0">
        <div style="color:red">表格内的学生信息在档案中无法找到</div>
        <div style="padding:.5em 0;text-align:right">
          <el-button size="small" type="primary" @click="downloadErrorListHandler">下载</el-button>
        </div>
        <el-table :data="errorList" size="small" >
          <el-table-column type="selection" width="55" align="center" fixed="left" label="选择"> </el-table-column>
          <el-table-column type="index" :index="1" label="序号" width="45" align="center" fixed="left"/>
          <el-table-column prop="name" label="姓名" width="90" align="center" fixed="left" />
          <el-table-column prop="idCard" label="身份证号" width="190" align="center" fixed="left"  />
          <el-table-column prop="employmentTeacher" label="就业老师" width="90" align="center"/>
          <el-table-column prop="interviewLevel" label="模面成绩" width="90" align="center" />
          <el-table-column prop="interviewComment" label="面试评价" width="180" align="center" />
          <el-table-column prop="intentionLocation" label="首轮就业意向调研" width="120" align="center" />
          <el-table-column prop="leaveCheck" label="就业部离校审批情况" width="150" align="center" />
          <el-table-column prop="recommendRecord" label="就业推荐及回访记录" width="200" align="center" />
          <el-table-column prop="tripartiteAgreement" label="三方协议回访情况" width="120" align="center" />
          <el-table-column prop="tripartiteAgreementStatus" label="三方协议签约情况" width="120" align="center" />
          <el-table-column prop="status" label="就业状态" width="120" align="center" />
          <el-table-column prop="currentLocation" label="目前所在地" width="200" align="center" />
          <el-table-column prop="entryTime" label="入职时间" width="90" align="center" />
          <el-table-column prop="companyName" label="首份工作公司" width="200" align="center" />
          <el-table-column prop="companyNature" label="公司性质" width="120" align="center" />
          <el-table-column prop="salaryMonth" label="实习月薪" width="90" align="center" />
          <el-table-column prop="salaryInternshipMonth" label="转正月薪" width="90" align="center" />
          <el-table-column prop="salaryYear" label="转正年薪" width="90" align="center" />
          <el-table-column prop="post" label="具体岗位" width="90" align="center" />
          <el-table-column prop="technology" label="所用技术" width="90" align="center" />
          <el-table-column prop="dimissionCompany" label="离职公司" width="260" align="center" />
          <el-table-column prop="dimissionTime" label="离职时间" width="80" align="center" />
          <el-table-column prop="dimissionReason" label="离职原因" width="160" align="center" />
          <el-table-column prop="comment" label="学院情况标注" width="160" align="center" />
          <el-table-column prop="isStar" label="是否明星学员" width="120" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {get,download} from '@/utils/request'
export default {
  // 组件名称
  name: 'demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
   return {
    baseURL:process.env.VUE_APP_BASE_API,
    fileUrl:process.env.VUE_APP_FILE_URL,
     loading:false,
     form:{},
     rules:{
      trainId: [ { required: true, message: '请选择实训', trigger: 'change' } ],
      channelId: [ { required: true, message: '请选择渠道', trigger: 'change' } ],
      graduationTime: [ { required: true, message: '请选择毕业时间', trigger: 'change' } ],
      education:[ { required: true, message: '请选择学历水平', trigger: 'change' } ],
     },
     trainData:{list:[]},
     errorList:[],
     msg:""
   }
  },
  // 计算属性
  computed: {
    ...mapGetters(['channels'])
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 下载导入失败的数据
    downloadErrorListHandler(){
      download('/studentEmployment/downloadErrorList');
    },
    importSubmitHandler(){
      this.loading = true;
      this.$refs.upload.submit();
    },
    // 下载模板
    downloadTemplate(){
      download('/studentEmployment/downloadTemplate');
    },
    // 导入成功
    successSubmitHandler(response){
      if(response.status === 200){
        this.$message({ message: "同步完成", type: 'success' })
        let errorList = response.data;
        this.errorList = errorList;
        if(errorList.length == 0){
          this.msg = "恭喜你，全部更新完成！"
        } else {
          this.msg = "有"+errorList.length+"更新失败！"
        }
      } else {
        this.$message({ message: response.message, type: 'error' })
      }
      this.loading = false;
    },
    goBack(){
      this.$router.back()
    },
    
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.student_import {
  font-size: 14px;
  color: #666;
}
</style>